<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">初审文章列表</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a th:href="@{admin}">首页</a></li>
                    <li class="breadcrumb-item active">文章管理</li>
                    <li class="breadcrumb-item active">文章列表</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- Main content -->
<section class="content">
<!--    <div class="card card-info">-->
<!--        <form id="searchForm" class="needs-validation form-inline" novalidate="">-->
<!--            <div class="form-group">-->
<!--                <label for="keywords">关键字:</label>-->
<!--                <input type="text" class="form-control m-2" id="keywords" required="">-->
<!--            </div>-->
<!--            <div class="form-group">-->
<!--                <label for="categoryId">分类:</label>-->
<!--                <select id="categoryId" class="form-control m-2" required="">-->
<!--                    <option selected disabled>选择分类</option>-->
<!--                    <option th:each="category:${categories}" th:value="${category.id}"-->
<!--                            th:text="${category.name}"></option>-->
<!--                </select>-->
<!--            </div>-->
<!--            <div class="form-group">-->
<!--                <label for="status">状态:</label>-->
<!--                <select id="status" class="form-control m-2" required="">-->
<!--                    <option selected disabled>选择状态</option>-->
<!--                    <option value="1">已发布</option>-->
<!--                    <option value="0">草稿</option>-->
<!--                    <option value="-1">初审中</option>-->
<!--                    <option value="-2">复审中</option>-->
<!--                </select>-->
<!--            </div>-->
<!--            <div class="form-group">-->
<!--                <button class="btn btn-primary ml-3" type="submit">查询</button>-->
<!--                <button class="btn btn-default ml-2" type="reset">重置</button>-->
<!--            </div>-->
<!--        </form>-->
<!--    </div>-->
    <div class="card card-body">
        <div id="toolbar" class="btn-group">
<!--            <shiro:hasPermission name="article:add">-->
<!--                <button id="btn_add" type="button" class="btn btn-primary">-->
<!--                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>写文章-->
<!--                </button>-->
<!--            </shiro:hasPermission>-->
<!--            <shiro:hasPermission name="article:batchDelete">-->
<!--                <button id="btn_batch_delete" type="button" class="btn btn-danger">-->
<!--                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>批量删除-->
<!--                </button>-->
<!--            </shiro:hasPermission>-->
<!--            <shiro:hasPermission name="article:batchPush">-->
<!--                <button id="btn_batch_push" type="button" class="btn btn-info">-->
<!--                    <span class="fa fa-send-o" aria-hidden="true"></span>批量推送-->
<!--                </button>-->
<!--            </shiro:hasPermission>-->
        </div>
        <table class="table-sm" id="table"></table>
    </div>
</section>

<!-- 表单模态框 -->
<div class="modal fade" id="formModal" tabindex="-1" role="dialog">
    <input id="hiddenArticleId" type="hidden">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="formTitle"></h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label">原因:</label>
                    <div class="col-sm-10">
                        <textarea id="d-auditReason" placeholder="请输入退回原因" style="height: 136px;width:380px;"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveOrUpdateBtn" onclick="saveOrUpdate()">保存
                </button>
            </div>
        </div>
        </div>
    </div>
</div>

<script>
    var editFlag = "[[${@perms.hasPerm('article:edit')}]]";
    var deleteFlag = "[[${@perms.hasPerm('article:delete')}]]";
    var auditFlag = "[[${@perms.hasPerm('article:audit')}]]";
    var columns = [
        {checkbox: true},
        {
            field: 'title',
            title: '标题',
            align: "center"
        }, {
            field: 'bizCategory',
            title: '分类',
            align: "center",
            width: 100,
            formatter: function (value) {
                return value.name;
            }
        },
        // {
        //     field: 'tags',
        //     title: '标签',
        //     class: 'table-tags',
        //     align: "center",
        //     formatter: function (tags) {
        //         var tagHtml = '';
        //         if (tags) {
        //             for (var i = 0, len = tags.length; i < len; i++) {
        //                 var tag = tags[i];
        //                 tagHtml += '<span class="badge badge-info">' + tag.name + '</span> ';
        //             }
        //         }
        //         return tagHtml;
        //     }
        // },
        {
            field: 'coverImage',
            title: '缩略图',
            align: "center",
            class: "link-pre",
            formatter: function (value, row, index) {
                return '<img src="' + value + '" style="width: 100px" onclick="previewImg(\'' + value + '\')"/>'
            }
        }, {
            field: 'slider',
            title: '轮播',
            align: "center",
            formatter: function (value) {
                return value ? '是' : '否'
            }
        }, {
            field: 'top',
            title: '置顶',
            align: "center",
            formatter: function (value) {
                return value ? '是' : '否'
            }
        }, {
            field: 'recommended',
            title: '推荐',
            align: "center",
            formatter: function (value) {
                return value ? '是' : '否'
            }
        }, {
            field: 'status',
            title: '状态',
            align: "center",
            formatter: function (value) {
                if (value == 0) {
                    return "草稿";
                } else if (value == 1) {
                    return "已发布";
                } else if (value == 2) {
                    return "初审中";
                } else if (value == 3) {
                    return "复审中";
                } else if (value == 21) {
                    return "初审退回";
                } else if (value == 31) {
                    return "复审退回";
                } else {
                    return "未知";
                }
            }
        }, {
            field: 'lookCount',
            title: '浏览',
            align: "center",
        }, {
            field: 'commentCount',
            title: '评论',
            align: "center",
        }, {
            field: 'loveCount',
            title: '喜欢',
            align: "center",
        },
        {
            field: 'operation',
            title: '操作',
            align: "center",
            width: 200,
            formatter: function (value, row) {
                var preview = '<button class="btn btn-info btn-sm" onclick="javascript:window.open(\'/blog/article/'+row.id+'\');">预览</button>&nbsp;';
                var auditTrue = auditFlag === 'true' ? '<button class="btn btn-info btn-sm" onclick="auditArticle(' + row.id + ', true)">通过</button>' : '';
                var auditFalse = auditFlag === 'true' ? '<button class="btn btn-danger btn-sm ml-1" onclick="auditArticle(' + row.id + ', false)">退回</button>' : '';
                return preview + auditTrue + auditFalse;
            }
        }];
    var options = {
        id: "#table",
        url: '/article/queryAuditList',
        columns: columns,
        toolbar: '#toolbar',
        showRefresh: true,
        queryParams: queryParams
    }
    Core.initTable(options);

    function refreshTable() {
        Core.refreshTable("#table")
    }

    /*查询参数*/
    function queryParams(params) {
        return {
            pageNumber: params.pageNumber,
            pageSize: params.pageSize,
            status: 2,
        };
    }

    /*审核文章*/
    function auditArticle(id, pass) {
        if (pass) {
            Core.confirm("确定该篇文章初审通过？", function () {
                Core.postAjax("/article/audit", {"id": id, "status": 3}, function (data) {
                    if (data.status === 200) {
                        refreshTable();
                    }
                    layer.msg(data.msg);
                })
            })
        } else {
            $('#hiddenArticleId').val(id);
            $('#formTitle').text('退回原因')
            $("#formModal").modal('show');
        }
    }

    function saveOrUpdate() {
        var valid = $("#d-auditReason").val() == null || $("#d-auditReason").val() == undefined || $.trim($("#d-auditReason").val()) == '';
        var url = '/article/audit';
        if (!valid) {
            var id = $('#hiddenArticleId').val();
            Core.mask("#saveOrUpdateBtn");
            Core.postAjax(url, {"id": id, "status": 21, "auditReason": $("#d-auditReason").val()}, function (data) {
                Core.unmask("#saveOrUpdateBtn");
                if (data.status === 200) {
                    $("#formModal").modal("hide");
                    refreshTable();
                }
                layer.msg(data.msg);
            }, function () {
                Core.unmask("#saveOrUpdateBtn");
            })
        }
    }

    $(function () {
        // 查询
        $('#searchForm').submit(function (event) {
            event.preventDefault();
            event.stopPropagation();
            refreshTable();
        })
    });

    function previewImg(src) {
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            area: '45%',
            skin: 'layui-layer-nobg', //没有背景色
            shadeClose: true,
            content: '<img style="width: 100%" alt="link" src="' + src + '">'
        });
    }

</script>